<template>
    <div style="overflow: hidden">
        <!--左侧功能栏-->
        <div class="function-bar" :style="{height: pageHeight}">
            <el-tooltip class="item" effect="dark" content="基础信息" placement="left">
                <span class="bar-item" @click="showSchedulePanel"><i class="el-icon-cxl el-icon-cxl-jichuxinxi"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="教学进度计划信息" placement="left">
                <span class="bar-item" @click="selectCard(0)"><i class="el-icon-cxl el-icon-cxl-shijian"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="知识点详情" placement="left">
                <span class="bar-item" @click="selectCard(1)"><i class="el-icon-cxl el-icon-cxl-shijian"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="考试列表" placement="left">
                <span class="bar-item" @click="selectCard(2)"><i class="el-icon-cxl el-icon-cxl-kaoshi"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="课程列表" placement="left">
                <span class="bar-item" @click="selectCard(3)"><i class="el-icon-cxl el-icon-cxl-shijian"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="切换视图" placement="left">
                <span class="bar-item"><i class="el-icon-cxl el-icon-cxl-qiehuan1"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="功能" placement="left">
                <span class="bar-item"><i class="el-icon-cxl el-icon-cxl-banben"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="帮助" placement="left">
                <span class="bar-item"><i class="el-icon-cxl el-icon-cxl-bangzhu"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="保存到本地" placement="left">
                <span class="bar-item" @click="saveSchedule(1)"><i class="el-icon-cxl el-icon-cxl-bangzhu"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="获取本地计划表信息" placement="left">
                <span class="bar-item" @click="getSchedule"><i class="el-icon-cxl el-icon-cxl-bangzhu"></i></span>
            </el-tooltip>
        </div>
        <div class="schedule-panel" v-show="calendarOpacity === 0" :style="{height: pageHeight,opacity:1 - calendarOpacity}">
            <el-form ref="form" :model="schedule" label-width="200px">
                <el-form-item label="教学进度计划名称">
                    <el-input v-model="schedule.name"></el-input>
                </el-form-item>
                <el-form-item label="适用班级">
                    <el-select v-model="schedule.applyClass" filterable placeholder="请选择适用班级">
                        <el-option v-for="item in classList" :key="item.class_id" :label="item.name" :value="item.class_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程信息">
                    <el-select v-model="schedule.courseList" filterable placeholder="请选择课程信息">
                        <el-option v-for="item in courseList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教学日期">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="请选择开始日期" v-model="schedule.beginDate" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="请选择结束日期" v-model="schedule.endDate" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="备注信息">
                    <el-input type="textarea" v-model="schedule.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="autoGeneratineTemplate">生成模板</el-button>
                    <el-button type="primary" @click="onSubmit">创建</el-button>
                    <el-button>返回</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--主要信息-->
        <div class="calendar-panel" v-show="calendarOpacity === 1" :style="{height: pageHeight,opacity:calendarOpacity}">
            <ul class="weekdays">
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li style="color:red">六</li>
                <li style="color:red">日</li>
            </ul>
            <!-- 日期 -->
            <ul class="days">
                <draggable v-model="dayList" :options="getDayOptions">
                    <transition-group>
                        <li v-for="(day, index) in dayList" @click="selectDay(dateStrList[index])" :key="day.date.date">
                            <div class="day-info">
                                <!--<span class="day-date">{{day.date.date}}</span>-->
                                <span class="day-date" @click="selectCard(1)">{{dateStrList[index]}}</span>
                                <span class="knowledge-sort" @click="sortItem(dateStrList[index])">
                                     <el-tooltip placement="top" content="排序">
                                        <i class="el-icon-cxl el-icon-cxl-icon-"></i>
                                    </el-tooltip>
                                </span>
                                <span class="study-time">
                                    <el-tooltip placement="top">
                                        <div slot="content">始：{{eventMap[day.date.date].beginTime}}<br/>止：{{ eventMap[day.date.date].endTime}}</div>
                                        <i class="el-icon-cxl el-icon-cxl-shijian2"></i>
                                    </el-tooltip>
                                </span>
                                <!--<span class="knowledge-sort" @click="sortItem(dateStrList[index])">-->
                                     <!--<el-tooltip placement="top" content="清空">-->
                                        <!--<i class="el-icon-cxl el-icon-cxl-icon-"></i>-->
                                    <!--</el-tooltip>-->
                                <!--</span>-->
                            </div>
                            <div class="day-knowledge">
                                <draggable v-model="eventMap[day.date.date].details" :options="getViewDetailsOptions">
                                    <transition-group class="day-knowledge-bar">
                                        <span  class="knowledge" v-for="(element, index) in eventMap[day.date.date].details"
                                               :key="element.id"
                                               :class="[{checkKnowledge : hoverId === element.id}, knowledgeType.style[element.type]]"
                                               @mouseenter="enterKnowledge(element.id)"
                                               @mouseleave="leaveKnowledge"
                                        >
                                            <i class="el-icon-cxl" :class="[knowledgeType.icon[element.type]]"></i>
                                            <el-tooltip placement="right" content="移除">
                                                <i class="el-icon-cxl el-icon-cxl-guanbi delete-knowledge" @click="removeKnowledge(day.date.date, index)"></i>
                                            </el-tooltip>
                                            {{element.name}}
                                        </span>
                                    </transition-group>
                                </draggable>
                            </div>
                        </li>
                    </transition-group>
                </draggable>
            </ul>
        </div>
        <!--右侧详情信息-->
        <div class="details-panel" :style="{height: pageHeight}">
            <el-card class="box-card card-exam" shadow="hover" v-show="show.examCard">
                <div slot="header" class="clearfix">
                    <span>考试信息</span>
                    <el-button style="float: right; padding: 3px 0" type="text">添加考试</el-button>
                </div>
                <div>
                    <el-input placeholder="请输入考试名称" v-model="exam.add.name" clearable>
                        <el-button slot="append" icon="el-icon-search" @click="addExam" ></el-button>
                    </el-input>
                </div>
                <div>
                    <draggable v-model="examList" :options="getExamOptions">
                        <transition-group>
                            <span class="knowledge" v-for="(element, index) in examList"
                                  :key="element.id"
                                  :class="[{checkKnowledge : hoverId === element.id}, knowledgeType.style[element.type]]"
                                  @mouseenter="enterKnowledge(element.id)"
                                  @mouseleave="leaveKnowledge"
                            >
                                <i class="el-icon-cxl" :class="[knowledgeType.icon[element.type]]"></i>
                                <el-tooltip placement="right" content="移除">
                                    <i class="el-icon-cxl el-icon-cxl-guanbi delete-knowledge" @click="removeKnowledge(selectDate, index)"></i>
                                </el-tooltip>
                                {{element.name}}
                            </span>
                        </transition-group>
                    </draggable>
                </div>
            </el-card>
            <el-card class="box-card card-course" shadow="hover" v-show="show.courseCard">
                <div slot="header" class="clearfix">
                    <span>我是课程名称</span>
                    <el-button style="float: right; padding: 3px 0" type="text">选择课程</el-button>
                </div>
                基本信息
            </el-card>
            <el-card class="box-card card-schedule" shadow="hover" v-show="show.scheduleCard">
                <div slot="header" class="clearfix">
                    <span>{{schedule.name}}</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="saveSchedule(1)">保存</el-button>
                </div>
                基本信息
            </el-card>
            <el-card class="box-card card-knowledge" shadow="hover" v-show="show.knowledgeCard">
                <div slot="header" class="clearfix">
                    <span>日期：{{selectDate}}</span>
                    <el-button style="float: right; padding: 3px 0" type="text">设置</el-button>
                </div>
                <div class="times-time-panel">
                    <el-time-select class="time" v-model="eventMap[selectDate].beginTime" :picker-options="{start: '08:30',step: '00:15',end: '17:30'}" placeholder="请选择开始时间"></el-time-select>
                    <el-time-select class="time" v-model="eventMap[selectDate].endTime" :picker-options="{start: '08:30',step: '00:15',end: '17:30'}" placeholder="请选择结束时间"></el-time-select>
                </div>
                <div class="card-knowledge-panel">
                    <draggable v-model="eventMap[selectDate].details" :options="getDetailsOptions">
                        <transition-group>
                            <span class="knowledge" v-for="(element, index) in eventMap[selectDate].details"
                                  :key="element.id"
                                  :class="[{checkKnowledge : hoverId === element.id}, knowledgeType.style[element.type]]"
                                  @mouseenter="enterKnowledge(element.id)"
                                  @mouseleave="leaveKnowledge"
                            >
                                <i class="el-icon-cxl" :class="[knowledgeType.icon[element.type]]"></i>
                                <el-tooltip placement="right" content="移除">
                                    <i class="el-icon-cxl el-icon-cxl-guanbi delete-knowledge" @click="removeKnowledge(selectDate, index)"></i>
                                </el-tooltip>
                                {{element.name}}
                            </span>
                        </transition-group>
                    </draggable>
                </div>
            </el-card>
            <el-card shadow="hover" class="card-button-panel">
                <el-button type="primary">保存</el-button>
                <el-button type="primary" v-show="!show.scheduleCard" @click="selectCard(0)">关闭</el-button>
            </el-card>
        </div>
    </div>
</template>

<script>
    'use strict';

    import {baseUtil} from '@/util/BaseUtil';
    import draggable from 'vuedraggable';
    import {calendar} from '@/util/LunarCalendarUtil';

    export default {
        components : {
            draggable
        },
        name: "schedule",
        data() {
            return {
                // 工具类
                baseUtil,
                baseData: baseUtil.getBaseData(),
                baseInfo:baseUtil.getInfo(),
                calendar,
                verification: baseUtil.getVerification(),
                cache: baseUtil.getCacheUtil(),

                // 页面尺寸信息
                pageHeight: window.innerHeight + 'px',
                pageWidth: window.innerWidth + 'px',

                // 开始时间（列表）
                startDate : '2018-09-06',
                // 结束时间（列表）
                endDate : '2019-02-03',

                // 教学进度计划的信息
                schedule: {
                    name : '我是教学进度计划名称',
                    // 开始日期
                    beginDate : '',
                    // 结束日期
                    endDate : '',
                    // 所属班级信息
                    applyClass : '',
                    remark : '',
                    // 预计时长
                    duration : 20,
                    // 课程信息列表
                    courseList : [],
                    // 教师信息列表
                    teacherList : [],
                    // 课次信息列表
                    timesList : [],
                    // 考试信息列表
                    examList : [],
                    // 日期详情列表
                    dayList : [],
                },

                // 考试信息列表
                examList : [],
                exam : {
                    index : 1000,
                    add : {id: 0, name : '', beginTime: '', endTime: '', type : 2}
                },

                // 班级列表
                classList : [{id : 1, name : '班级1'},{id : 2, name : '班级2'},{id : 3, name : '班级3'}],
                // 课程列表
                courseList : [{id : 1, name : '课程1'},{id : 2, name : '课程2'},{id : 3, name : '课程3'}],
                // 教师列表
                teacherList : [{id : 1, name : '教师1'},{id : 2, name : '教师2'},{id : 3, name : '教师3'}],

                // 预计时长
                duration : 20,
                // 日期列表
                dateStrList : [],
                // 日期详情列表
                dayList : [],
                // 每天信息列表
                eventList : [
                    {studyDate : '2018-10-03', details : [
                            {id: 12, type : 1, name : '知识点1',},
                            {id: 16, type : 1, name : '知识点2',},
                            {id: 24, type : 1, name : '知识点10',},
                            {id: 25, type : 1, name : '知识点11',},
                            {id: 26, type : 1, name : '知识点12',},
                            {id: 27, type : 1, name : '知识点13',},
                            {id: 28, type : 1, name : '知识点14',},
                            {id: 29, type : 1, name : '知识点15',},
                            {id: 30, type : 1, name : '知识点16',},
                            {id: 31, type : 1, name : '知识点17',},
                            {id: 32, type : 1, name : '知识点18',},
                            {id: 33, type : 1, name : '知识点19',},
                            {id: 34, type : 1, name : '知识点20',},
                            {id: 35, type : 1, name : '知识点21',},
                            {id: 36, type : 1, name : '知识点22',},
                            {id: 37, type : 1, name : '知识点23',},
                            {id: 38, type : 1, name : '知识点24',},
                            {id: 39, type : 1, name : '知识点25',},
                            {id: 40, type : 1, name : '知识点26',},
                            {id: 41, type : 1, name : '知识点27',},
                            {id: 42, type : 1, name : '知识点28',},
                            {id: 43, type : 1, name : '知识点29',},
                            {id: 44, type : 1, name : '知识点30',},
                            {id: 45, type : 1, name : '知识点31',},
                            {id: 46, type : 1, name : '知识点32',},
                            {id: 47, type : 1, name : '知识点33',},
                            {id: 48, type : 1, name : '知识点34',},
                            {id: 49, type : 1, name : '知识点35',},
                            {id: 50, type : 1, name : '知识点36',},
                            {id: 51, type : 1, name : '知识点37',},
                            {id: 52, type : 1, name : '知识点38',},
                            {id: 20, type : 2, name : '考试1',},
                        ],
                        beginTime : '', endTime : '',},
                    {studyDate : '2018-10-04', details : [{id: 13, type : 1, name : '知识点1',},{id: 17, type : 1, name : '知识点2',},{id: 21, type : 2, name : '考试1',}], beginTime : '', endTime : '',},
                    {studyDate : '2018-10-05', details : [{id: 14, type : 1, name : '知识点1',},{id: 18, type : 1, name : '知识点2',},{id: 22, type : 2, name : '考试1',}], beginTime : '', endTime : '',},
                    {studyDate : '2018-10-20', details : [{id: 15, type : 1, name : '知识点1',},{id: 19, type : 1, name : '知识点2',},{id: 23, type : 2, name : '考试1',}], beginTime : '', endTime : '',}
                ],
                // 日期信息键值对
                eventMap : {},
                // 选中的日期
                selectDate : '2018-10-03',
                // 样式表
                knowledgeType : {
                    style : {1 : 'normal', 2 : 'exam', 3 : 'create', 4 : 'other'},
                    icon : {1 : 'el-icon-cxl-zhishidian', 2 : 'el-icon-cxl-kaoshi', 3 : 'el-icon-cxl-icon411', 4 : 'el-icon-cxl-shijian'},
                },
                // 移动到的项目id
                hoverId : 0,
                // 点击的日期信息

                // 日程面板的透明度
                calendarOpacity : 1,

                show : {
                    examCard : true,
                    courseCard : false,
                    knowledgeCard : false,
                    scheduleCard : false,
                },

                save : {
                    // 自动保存
                    auto : true,
                    // 保存时长
                    duration : 60 * 60 * 24 * 30,
                    // 上一次保存时间（时间戳）
                    lastSaveTime : null,
                    // 连续保存间隔时间（单位：s）
                    // interval : 30 * 1000,
                    interval : 10,
                },

            }
        },
        computed : {
            getDayOptions() {
                return {group : 'days', sort : true, animation : 200, scroll : true, scrollSensitivity : 20,};
            },
            getDetailsOptions() {
                return {group : 'details', sort : true, animation : 200, scroll : true, scrollSensitivity : 20,};
            },
            getViewDetailsOptions() {
                return {group : 'viewDetails', sort : true, animation : 200, scroll : true, scrollSensitivity : 20,};
            },
            getCourseOptions() {
                return {group : {name : 'viewDetails', pull : 'clone', put: false}, sort : false, animation : 200, scroll : true, scrollSensitivity : 20,};
            },
            getExamOptions() {
                return {group : {name : 'viewDetails', pull : 'clone', put: false}, sort : true, animation : 200, scroll : true, scrollSensitivity : 20,};
            },
        },
        methods : {
            // 获取班级信息
            getAllClass() {
                this.baseUtil.ajaxPost(this, "/class/getAllClass", {
                    getByPage: false,
                },(data) => {
                    this.classList = data.data;
                    console.log(this.classList);
                });
            },
            // 处理数据
            handleList() {
                this.eventMap = {};
                this.eventList.forEach((item, index) => {
                    this.eventMap[item.studyDate] = item;
                });
            },
            // 初始化
            initTable() {
                // 处理数据
                this.handleList();
                // 初始化列表信息
                this.initDayList();
                // console.log(this.eventMap)
            },
            initDayList() {
                // 获取时长
                let startDate = this.baseUtil.formatDate(this.startDate, null, null, true);
                let endDate = this.baseUtil.formatDate(this.endDate, null, null, true);
                // console.log(startDate, endDate);
                startDate = this.baseUtil.formatDate(startDate.timestamp - ((startDate.week === 0 ? 7 : startDate.week) - 1) * 24 * 60 * 60 * 1000, null, null, true);
                endDate = this.baseUtil.formatDate(endDate.timestamp + (7 - (endDate.week === 0 ? 7 : endDate.week)) * 24 * 60 * 60 * 1000, null, null, true);
                // console.log(startDate, endDate);
                if(startDate.timestamp > endDate.timestamp) {
                    // 错误了
                    this.$message.error("加载错误");
                    return;
                }
                // 上述条件已经计算好格子数（必定是7的倍数）
                this.duration = parseInt((endDate.timestamp - startDate.timestamp) / (24 * 60 * 60 * 1000));
                this.duration += 7 - this.duration % 7;
                let dayList = [];
                this.dateStrList = [];
                for(let i = 0; i < this.duration; i++) {
                    let date = this.baseUtil.formatDate(startDate.timestamp + i * (24 * 60 * 60 * 1000), 'Y-M-D', null, true);
                    if(this.eventMap[date.date] === undefined) {
                        this.eventMap[date.date] = {
                            studyDate : date.date,
                            details : []
                        };
                    }
                    this.dateStrList.push(date.date);
                    let day = {
                        date : date,
                    };
                    dayList.push(day);
                }
                this.dayList = dayList;
            },
            selectDay(date) {
                this.selectDate = date;
            },
            enterKnowledge(knowledgeId) {
                this.hoverId = knowledgeId;
            },
            leaveKnowledge() {
                this.hoverId = 0;
            },
            removeKnowledge(date, index) {
                this.eventMap[date].details.splice(index, 1);
            },
            // 切换显示
            showSchedulePanel() {
                if(this.calendarOpacity === 1) {
                    this.calendarOpacity = 0;
                }else {
                    this.calendarOpacity = 1;
                }
                // this.checkDate = '';
            },
            // 自动生成模板
            autoGeneratineTemplate() {
                this.baseUtil.ajaxPost(this, "/plan/AutoGeneratineTemplate", {
                    courseIds : '98,100',
                    days : 20,
                },(data) => {
                    let template = data.data;
                    // 多余的知识点
                    let otherKnowledge = template.others;
                    // 正常填充的知识点
                    let simpleKnowledge = template.simple;

                    simpleKnowledge.forEach(list => {
                        let details = [];
                        list.forEach(knowledge => {
                            details.push({
                                course_id : knowledge.course_id,
                                name : knowledge.kName,
                                id : knowledge.knowledge_id,
                                section_id : knowledge.section_id
                            });
                        });
                        this.eventList[i].details = details;
                    });

                    this.handleList();
                    // console.log(this.classList);
                });
            },
            onSubmit() {

            },
            // 卡片选择
            selectCard(type) {
                this.show.courseCard = false;
                this.show.knowledgeCard = false;
                this.show.scheduleCard = false;
                this.show.examCard = false;
                switch (type) {
                    case 1:
                        this.show.knowledgeCard = true;
                        break;
                    case 2:
                        this.show.examCard = true;
                        break;
                    case 3:
                        this.show.courseCard = true;
                        break;
                    default:
                        this.show.scheduleCard = true;
                }
            },
            // 添加考试
            addExam() {
                if(this.baseUtil.getVerification().isNull(this.exam.add.name)) {
                    this.$message.error('考试名称不能为空');
                    return;
                }
                let exam = this.exam.add;
                exam.id = this.exam.index++;
                exam.type = 2;
                this.examList.push(exam);
                this.exam.add = {name : '', beginTime: '', endTime: ''};
            },
            loginLoading(message) {
                return this.$loading({
                    lock: true,
                    text: message,
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            },
            // 单天知识点排序
            sortItem(date) {
                let map = {};
                this.eventMap[date].details.forEach((item, index) => {
                    if(map[item.type] === undefined) {
                        map[item.type] = [];
                    }
                    map[item.type].push(item);
                });
                let array = [];
                Object.keys(map).forEach((index) => {
                    array = array.concat(map[index]);
                });
                this.eventMap[date].details = array
            },
            // 保存计划表到本地
            saveSchedule(type) {
                let loading = this.loginLoading("保存中...");
                let time = new Date();
                if(time.getTime() - this.save.lastSaveTime <= this.save.interval) {
                    // 不能保存
                    this.$message.error("请不要连续保存");
                    loading.close();
                    return;
                }
                if(this.schedule.name.length === 0) {
                    this.$message.error("教学进度计划名称不能为空");
                    loading.close();
                    return;
                }
                this.save.lastSaveTime = time.getTime();
                type = type || 0;
                // 获取时间信息
                let timeStr = this.baseUtil.formatDate(time, 'yyyy-MM-dd HH:mm:ss');
                let schedule = {
                    name : this.schedule.name,
                    type : type,
                    time : timeStr,
                    data : {
                        eventList : this.eventList,
                    }
                };
                // 获取已有的计划表数据
                // let saveList = this.$cookies.get("redefine_schedule_save_list");
                let saveList = this.cache.get("redefine_schedule_save_list");
                if(this.verification.isNull(saveList) || this.verification.isString(saveList)) {
                    saveList = [];
                }
                let storageName = 'redefine_schedule_data' + this.baseUtil.formatDate(new Date(), 'yyyyMMddHHmmss');
                saveList.push(storageName);
                // 存入cookie
                // this.$cookies.set('redefine_schedule_save_list', saveList, this.save.duration);
                this.cache.set('redefine_schedule_save_list', saveList);
                this.cache.set(storageName, schedule);
                // this.$cookies.set(storageName, schedule, this.save.duration);
                this.$message.success("保存成功");
                loading.close();
            },
            // 获取教学进度计划列表
            getSchedule() {
                let saveList = this.cache.get("redefine_schedule_save_list");
                if(this.baseUtil.getVerification().isNull(saveList) || this.verification.isString(saveList)) {
                    this.$message.error("没有数据");
                    return;
                }

                let scheduleList = [];
                let tempSaveList = [];
                saveList.forEach((item, index) => {
                    let schedule = this.cache.get(item);
                    // let schedule = this.$cookies.get(item);
                    if(this.baseUtil.getVerification().isNotNull(schedule)) {
                        tempSaveList.push(item);
                        scheduleList.push(schedule);
                    }
                });
                this.cache.set('redefine_schedule_save_list', tempSaveList);
                // this.$cookies.set('redefine_schedule_save_list', tempSaveList, this.save.duration);
                console.log(scheduleList);

            }
        },
        created() {
            // this.getAllClass();
            // 初始化表格信息
            this.initTable();
        },
        mounted() {
            // 界面显示美化
            window.onresize = () => {
                this.pageHeight = window.innerHeight + 'px';
                this.pageWidth = window.innerWidth + 'px';
            };

        }
    }
</script>

<style lang="scss" scoped>

    * {
        box-sizing: border-box;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -khtml-user-select: none; /* Konqueror */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently not supported by any browser */

        /*滚动条整体样式*/
        &::-webkit-scrollbar {
            /*高宽分别对应横竖滚动条的尺寸*/
            width: 5px;
            height: 5px;
        }
        /*滚动条里面小方块*/
        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #2dbeff;
        }
        /*滚动条里面轨道*/
        &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 10px;
            background: #ffffff;
        }
    }

    .function-bar{
        display: inline-block;
        width: 3%;
        /*background-color: rgba(0, 0, 0, 0.5);*/
        float: left;

        &>span{
            display: block;
            margin: 10px 0;
            height: 50px;
        }

        &>span.bar-item{
            display: block;
            cursor: pointer;
            margin: 10px 0;
            height: 50px;
            font-size: 30px;
            text-align: center;
            line-height: 45px;
            color: black;
            transition: background-color 0.5s, color 0.5s;

            &>i{
                font-weight: bold;
            }

            &:hover{
                background-color: rgba(0, 0, 0, 0.2);
                color : blueviolet;
            }
        }

        &:hover{
            left: 0;
            background-color: rgba(255, 255, 255, 0.6);
        }
    }

    .schedule-panel{
        float: left;
        /*position: absolute;*/
        /*left: 3%;*/
        /*top : 100%;*/
        /*top : 0;*/
        width: 80%;
        display: inline-block;
        /*z-index: 999;*/

        transition: opacity 0.8s, top 0.8s;
    }

    .calendar-panel{
        animation: showPanel 2s;
        /*opacity : 0;*/
        width:80%;
        display: inline-block;
        float: left;
        /*float: left;*/
        /*margin: 0 auto;*/
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.12);
        overflow: hidden;

        transition: opacity 0.8s;

        ul.weekdays{
            margin: 0;
            padding: 10px 0;
            background-color: #00B8EC;
            display: flex;
            flex-wrap: wrap;
            color: #FFFFFF;
            justify-content: space-around;
            height: 5%;

            li{
                display: inline-block;
                width: 13.6%;
                text-align: center;
            }
        }

        ul.days{
            padding: 0;
            background: #FFFFFF;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            height: 95%;
            overflow-y: auto;
            overflow-x: hidden;

            li{
                position: relative;
                list-style-type: none;
                display: inline-block;
                width: 14.28%;
                text-align: center;
                padding-bottom: 5px;
                padding-top: 5px;
                font-size: 1rem;
                color: #000;
                cursor: default;
                overflow: hidden;
                height: 160px;
                border: 1px black solid;
                border-right: 0;

                /*transition: background-color 0.4s, box-shadow 0.4s, border-color 0.4s;*/

                &:nth-child(7n){
                    border: 1px black solid;
                }

                .day-info{
                    display: inline-block;
                    width: 98%;
                    height: 12%;

                    .day-date{
                        float: left;
                    }

                    .study-time,.knowledge-sort{
                        /*float: right;*/
                        /*margin: 0 5px;*/
                        position: absolute;
                        right: 4px;
                        top: 2px;
                        color: red;
                        cursor: pointer;

                        opacity: 0;
                        /*transition: opacity 0.4s;*/

                        &>i{
                            font-weight: bold;
                            font-size: 18px;
                        }
                    }

                    .knowledge-sort{
                        right: 28px;
                        opacity: 0;
                        /*transition: opacity 0.4s;*/
                    }

                }

                .day-knowledge{
                    height: 88%;
                    overflow-y: auto;
                    overflow-x: hidden;

                    .day-knowledge-bar{
                        display: inline-block;
                        /*min-height: 60px;*/
                        min-height: 120px;
                        width: 100%;
                    }

                }

                &:hover{
                    background-color: rgba(19, 33, 24, 0.02);
                    border-color: transparent;
                    box-shadow: 0 0 20px #ffa9c1;
                    border-radius: 10px;
                }

                &:hover .day-info .study-time{
                    opacity: 1;
                }

                &:hover .day-info .knowledge-sort{
                    opacity: 1;
                }

            }
        }
    }

    .details-panel{
        display: inline-block;
        width: 17%;
        /*background-color: rgba(255, 255, 255, 0.5);*/
        float: left;

        .box-card{
            text-align: left;
        }

        .card-course{
            height: 90%;
        }

        .card-exam{
            height: 90%;
        }

        .card-schedule{
            height: 90%;
        }

        .card-knowledge{
            height: 90%;

            .times-time-panel{
                text-align: center;
                .time{
                    width: 95%;
                    margin: 5px;
                }
            }

            .card-knowledge-panel{
                height: 480px;
                overflow-x: hidden;
                overflow-y: auto;
            }
        }

        .card-button-panel{
            height: 10%;
        }

    }

    // 普通知识点
    span.knowledge{
        display: inline-block;
        /*margin: 1px 0;*/
        padding: 1px 10px;
        border-radius: 10px;
        /*color: red;*/
        width: 95%;
        height: 20px;
        line-height: 20px;
        text-align: left;
        /*border: 1px black solid;*/

        cursor: default;
        position: relative;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        /*transition: border-color 0.5s, color 0.5s;*/

        &:hover{
            color: red;
        }
        &:hover i.delete-knowledge{
            opacity: 1;
        }

        &.checkKnowledge{
            /*color: red;*/
            /*border-color: red;*/
        }

        i.el-icon-cxl{
            text-align: center;
            display: inline-block;
            width: 30px;
            /*color: #1ecd97;*/
            color: black;
            font-weight: bold;
        }

        i.delete-knowledge{
            position: absolute;
            right: 3px;
            top: 5px;
            font-size: 10px;
            font-weight: bold;
            cursor: pointer;
            color: red;
            transition: opacity 0.5s;
            opacity: 0;
        }

        &.normal{
            background: -webkit-linear-gradient(left, rgba(246, 210, 66, 1), rgba(246, 210, 66, 0.3)); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(right, rgba(246, 210, 66, 1), rgba(246, 210, 66, 0.3)); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(right, rgba(246, 210, 66, 1), rgba(246, 210, 66, 0.3)); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, rgba(246, 210, 66, 1), rgba(246, 210, 66, 0.3)); /* 标准的语法 */
        }

        &.create{

        }

        &.exam{
            background: -webkit-linear-gradient(left, rgba(50, 204, 188, 1), rgba(50, 204, 188, 0.3)); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(right, rgba(50, 204, 188, 1), rgba(50, 204, 188, 0.3)); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(right, rgba(50, 204, 188, 1), rgba(50, 204, 188, 0.3)); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, rgba(50, 204, 188, 1), rgba(50, 204, 188, 0.3)); /* 标准的语法 */
        }

        &.other{

        }

    }

    @keyframes showPanel {
        from {opacity:0.0;}
        to {opacity:1;}
    }
</style>
